<template>
    <div class="app-container" v-loading="listLoading">
        <el-form ref="form" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="4">
                   <div style="height: 1px;"></div>
                </el-col>
                <el-col :span="4">
                    <div style="height: 1px;"></div>
                </el-col>

                <el-col :span="6">
                    <div style="height: 1px;"></div>
                </el-col>
             
                <el-col :span="6">
                    <div style="height: 1px;"></div>
                </el-col>

                <el-col :span="4">
                    <el-select v-model="app_id" placeholder="选择项目">
                        <el-option
                        v-for="item in projectList"
                        :key="item.app_id"
                        :label="item.name"
                        :value="item.app_id">
                        </el-option>
                    </el-select>
                </el-col>
               
            </el-row>

        </el-form>
       
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" style="margin-top: 30px;">
            <template v-for="item in deviceList">
                <el-tab-pane :label="item.name" :name="item.device_id">

                    <div class="tab_content" v-if="activeName==item.device_id">
                        <div class="tabc_title">
                            <span>历史数据</span>
                        </div>
                        <div class="tabc_div">
                            <span>设备:{{item.name}}，采集时间:{{getTimeCount()}}</span> 
                        </div>
                        <div class="tablc_head">
                            <div :id="'echarts_'+activeName" style="width: 100%;height: 400px;"></div>

                            <div :id="'echartsnext_'+activeName" style="width: 100%;height: 400px;" v-if="item.device_type=='gps_displacement'"></div>
                        </div>
                        <div class="tabc_title">
                            <span>设备信息</span>
                        </div>
                        <div class="tabc_content">
                            <div class="tabcc_title">
                                <span>设备名称:</span>
                                <span>{{deviceInfo.name}}</span>
                            </div>
                            <div class="tabcc_title">
                                <span>设备KEY:</span>
                                <span>{{deviceInfo.device_bd_key}}</span>
                            </div>
                            <div class="tabcc_title">
                                <span>设备单位:</span>
                                <span>{{deviceInfo.unit}}</span>
                            </div>
                            <div class="tabcc_title">
                                <span>设备类型:</span>
                                <span>{{deviceInfo.device_type_name}}</span>
                            </div>
                            <template v-for="json in deviceWarning">
                                <div class="tabcc_title">
                                    <span>{{ colorList[json.warning_type]}}报警值:</span>
                                    <span :style="{color:json.warning_type=='yellow'?'#ffd600':json.warning_type}">{{json.warning_value}}</span>
                                </div>
                            </template>
                          
                        </div>
                    </div>
                </el-tab-pane>
            </template>

        </el-tabs>
      




 



        
    </div>
</template>

<script>
import homeapi from '@/api/tailings_monitoring_service_smos_api.js'
import until from '@/api/until.js'
import * as echarts from 'echarts';
export default {
    data() {
        return {
            list: null,
            listLoading: true,
            queryParms:{
                page:1,
                page_size:99999999,
                name:"",
                device_id:'',
                timeList:[],
                device_type:"",
                total:0
               
            },
            form:{
                app_id:"",
                name:"",
                device_bd_key:"",
                intro:"",
                device_type:"",
                unit:"",
                photo:"",
                
            },
            dialogFormVisible:false,
            formLabelWidth:'100px',
            projectList:[],
            app_id:"",
            deviceTypeList:[],

            drawer:false,
            nowItem:{},

            devicePositionList:[],
            posititonForm:{
                app_id:"",
                device_id:"",
                gps_lng:"",
                gps_lat:"",
                face_img_coordinate:"",
            },

            dialogPositionFormVisible:false,
            map:null,
            maker:null,
            colorList:{
                'yellow':'黄色报警',
                'red':"红色报警",
                'blue':"蓝色报警",
                'orange':'橙色报警'
            },
            deviceList:[],
            activeName:"",
            deviceInfo:{},
            deviceWarning:[],
        }
    },
    watch:{
        app_id(){
            until.setCookie("app_id",this.app_id)
            this.getDeviceList();
            
           
       
        },
        activeName(){
           
        }
    },
    created() {
        

        this.fetchData()
        this.getDeviceType();
    },
    methods: {
        handleClick(item){
        
            this.getDevicInfo()
            this.getDevicWarning()
        },

        getTimeCount(){
            let timeTxt=""
            timeTxt=until.formatDateNoYear(new Date().getTime()-7*24*60*60*1000)+"至"+until.formatDateNoYear(new Date())
            return timeTxt
        },
  
         //获取设备
         async getDeviceList(){
            let page=1;
            let page_size=99999
            let name=""
            let app_id=this.app_id
            let data=await homeapi.Smos_apiDevicePageGet({page,page_size,name,app_id});
            if(data.error_code==0){
                data.data.list.map(res=>{
                    res.device_id=res.device_id+""
                })
                this.deviceList=data.data.list?data.data.list:[]
                if(this.deviceList.length>0){
                    this.activeName=data.data.list[0].device_id
                 
                    this.getDevicInfo()
                    this.getDevicWarning()
                  
                }
               
            }
        },

        //获取设备信息
        async getDevicInfo(){
            let app_id=this.app_id
            let device_id=this.activeName
            let data=await homeapi.Smos_apiDeviceDetailGet({app_id,device_id});
            if(data.error_code==0){
                this.deviceInfo=data.data;
            }
        },
        //获取设备报警设置
        async getDevicWarning(){
            let app_id=this.app_id
            let device_id=this.activeName
            let data=await homeapi.Smos_apiDevice_warningAllGet({app_id,device_id});
            if(data.error_code==0){
                this.deviceWarning=data.data.list;
                this.getDeviceDataList();
            }
        },



        getTime(time){
            return until.formatDateChinese(time*1000)
        },

        async getDeviceType(){
            let data=await homeapi.Smos_apiDeviceTypesGet();
            if(data.error_code==0){
                this.deviceTypeList=data.data;
            }
        },
        getDviceTypeName(device_type){
            let name=""
            this.deviceTypeList.map(res=>{
                if(res.keyword==device_type){
                    name=res.name;
                }
            })
            return name;
        },


        async fetchData() {
            let form=this.queryParms
            let data=await homeapi.Smos_apiAppPageGet(form);
            if(data.error_code==0){
                this.listLoading=false;
                this.projectList=data.data.list;
                this.$nextTick(()=>{
                    let app_id=until.getCookie("app_id");
                    if(app_id){
                        this.app_id=parseInt(app_id) 
                    }
                    else{
                        this.app_id=data.data.list[0].app_id;
                    }
                    this.getDeviceList();
    
              
                })
               
                
               
            }
        },
      
    
        async getDeviceDataList(){
            let form=this.queryParms;
            form.device_id=this.activeName
            form.begin_time=parseInt(new Date().getTime()/1000) -7*24*60*60
            form.end_time=parseInt(new Date().getTime()/1000)
          
            form.app_id=this.app_id;
            let data=await homeapi.Smos_apiDevice_dataPageGet(form);
            if(data.error_code==0){
             
                this.createTu(data.data.list?data.data.list:[])
                if(data.data.list.length>0){
                    if(data.data.list[0].device_type=='gps_displacement'){
                        this.createTuNext(data.data.list?data.data.list:[])
                    }
                }
               
                // this.list=data.data.list?data.data.list:[];
                // this.queryParms.total=data.data.total
            }
        },
        createTu(data){
            data=data.reverse()
            let xData=[];
            let yData=[];

            let min=0;
            let max=0;
            let valueData=[];

            let  colors=["#6400ff","#00fff5","#a198c3","#000000"]

            // for(let i=0;i<xData[0].real_value.length;i++){
            //     yData.push()
            // }
            
            data[0].real_value.map((res,index)=>{
             
                if(res.value_key!=='d_variation_plane_x' && res.value_key!=='d_variation_plane_y' && res.value_key!='d_variation_plane_h'){
                    yData.push({
                        name:res.value_name,
                        value_key:res.value_key,
                       color:colors[index%4],
                        data:[],
                        type: 'line',
                        smooth: true
                    })
                }
               
            })
           
            this.deviceWarning.map(res=>{
                console.log(res.warning_value)
                if(res.warning_value!=0){
                  
                    let colorValue=res.warning_type=='yellow'?'#ffd600':res.warning_type
                    valueData.push(res.warning_value)
                    let dataValue=[];
                    data.map(json=>{
                        dataValue.push(parseFloat(res.warning_value))
                    })
                    yData.push({
                        name:this.colorList[res.warning_type],
                        color:colorValue,
                        data:dataValue,
                        type: 'line',
                        smooth: true

                    })
                }
               
            })
            console.log(yData)
         
            data.map(res=>{
                xData.push( until.formatDateNoYear(res.time*1000))
                res.real_value.map(json=>{
                 
                    yData.map(item=>{
                        
                        if(json.value_key==item.value_key){
                          
                            valueData.push(parseFloat(json.value))
                            item.data.push(parseFloat(json.value))
                        }
                    })
                    
                })
                
               

            })
       
            min=Math.min(...valueData)-1;
            max=Math.max(...valueData)+1;
        
            
            var myChart = echarts.init(document.getElementById('echarts_'+this.activeName));
          
            var option = {
                tooltip: {
                    trigger: 'axis',
                        position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    min:min,
                    max:max
                   
                },
                grid:{
                    left:50,
                    right:30,
                    top:30,
                },
                series: yData
            };
         
            myChart.setOption(option)
        },
         
        createTuNext(data){
            // data=data.reverse()
            let xData=[];
            let yData=[];

            // for(let i=0;i<xData[0].real_value.length;i++){
            //     yData.push()
            // }
            let min=0;
            let max=0;
            let valueData=[];
            let  colors=["#6400ff","#00fff5","#a198c3","#000000"]

            data[0].real_value.map((res,index)=>{
                if(res.value_key==='d_variation_plane_x' || res.value_key==='d_variation_plane_y' || res.value_key==='d_variation_plane_h'){
                    yData.push({
                        name:res.value_name,
                        value_key:res.value_key,
                        color:colors[index%4],
                        data:[],
                        type: 'line',
                        smooth: true
                    })
                }
               
            })
            this.deviceWarning.map(res=>{
                if(res.warning_value){
                    let colorValue=res.warning_type=='yellow'?'#ffd600':res.warning_type
                    let dataValue=[];
                    valueData.push(res.warning_value)
                    data.map(json=>{
                        dataValue.push(parseFloat(res.warning_value))
                    })
                    yData.push({
                        name:this.colorList[res.warning_type],
                        color:colorValue,
                        data:dataValue,
                        type: 'line',
                        smooth: true

                    })
                }
            })

         
            data.map(res=>{
                xData.push( until.formatDateNoYear(res.time*1000))
                res.real_value.map(json=>{
                   
                    yData.map(item=>{
                        if(json.value_key==item.value_key){
                            valueData.push(parseFloat(json.value))
                            item.data.push(parseFloat(json.value))
                        }
                    })
                    
                })
                
               

            })
            min=Math.min(...valueData)-1;
            max=Math.max(...valueData)+1;

        
            var myChart = echarts.init(document.getElementById('echartsnext_'+this.activeName));
         
            var option = {
               
                tooltip: {
                    trigger: 'axis',
                        position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    min:min,
                    max:max
                   
                },
                grid:{
                    left:50,
                    right:30,
                    top:30,
                },
                series: yData
            };
          
            myChart.setOption(option)
        }
         
    }
}
</script>
<style lang="css" scoped>
    .upload_div{
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        position: relative;
        float: left;
        margin-left: 10px;
        

    }
    .upload_div input{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
    }
    .imgdiv{
        width: 120px;
        
    }
    .imgdiv img{
        width: 100%;
       
    }
    .upload_div i{
        font-size: 32px;
    }
    .imgMainDiv{
        width: 160px;
        height: 160px;
        float: left;
    }
    .imgMainDiv img{
        width: 100%;
        height: 100%;
    }
    .tab_content{
        width: 100%;
        height: calc(100vh - 300px);
    }
    .tabc_div{
        font-size: 14px;
        color: #666666;
        margin-top: 15px;
    }
    .tabc_title{
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        margin-top: 15px;
    }
    .tabc_content{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 0px;
        flex-wrap: wrap;
    }
    .tabcc_title{
        flex: 1;
        min-width: 25%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 30px;
        font-size: 16px;
        color: #666666;
    }
    .tabcc_title span:last-child{
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        margin-left: 5px;
    }
</style>